<!DOCTYPE html>
<html lang="en">
<head>
  <script>
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';
  </script>
  <meta charset="UTF-8">
  <title>设备列表</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link href="../css/mui.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="../css/timeChoose.css" />
  <!--<link rel="stylesheet" href="../css/timecheck.css" />-->
  <link rel="stylesheet" href="../fonts/iconfont.css" />

  <script>
    var width =window.localStorage.getItem('width');
    document.documentElement.style.fontSize =  width ? width/6.4+  'px' :'55px';
  </script>


  <style>
    #app{
      width: 100%;
      margin-bottom: 0.3rem;
    }
    div p {
      margin: 0;
      padding: 0;
    }
    .deviceDiv p{
      color:black;
    }
    .deviceTitle{
      width: 100%;
      padding: 0.2rem;
      background-color: white;
      overflow: hidden;
      margin-top: 0.7rem;
    }
    .deviceTitle>div{
      float: left;
    }
    .imgDiv{
      width: 30%;
    }
    .imgDiv img{
      width: 100%;
    }
    .deviceInfo{
      width: 55%;
      margin: 0.1rem 0 0 0.3rem;
    }
    .deviceInfo p{
      margin: 0 0 0.08rem;
    }
    .lineDiv{
      margin-top: 0.1rem;
      background-color: white;
    }
    .deviceListDiv{
      width: 100%;
      overflow: hidden;
      margin-bottom: 0.8rem;

    }
    .deviceListDiv .device p{
      color: rgba(0, 0, 0, 0.71);
      font-size: 0.22rem;
    }
    .device{
      width: 94%;
      margin: 0.15rem auto 0;
      padding: 0.1rem 0 0.2rem;
      border-radius: 0.1rem;
      background-color: rgba(204, 204, 204, 0.61);
      overflow: hidden;
    }
    .deviceName{
      width: 100%;
      padding: 0.15rem  0 0.05rem 0.1rem;
      border-bottom: 1px solid rgba(0, 0, 0, 0.56);
    }
    .info{
      width: 100%;
      /*text-align: center;*/
      margin : 0.2rem 0 0 0;
      padding: 0 0.2rem;
      overflow: hidden;
    }
    .info p{
      margin-bottom: 0.05rem;

    }
    .leftDiv{
      float: left;
      width: 40%;
    }
    .rightDiv{
      width: 60%;
      float: right;
      text-align: center;
    }
    .floatRight{
      float: right;
    }
    .floatLeft{
      float: left;
    }
    .floatLeft , .floatRight{
      width: 31%;
      text-align: center;
    }
    .storeChoose{
      width: 85%;
      margin: 0.2rem auto 0.2rem;
      border: 1px solid #ccc;
      font-size: 0.22rem;
      text-align: center;
      background-color: white;
      overflow: hidden;
    }
    .storeChoose span{
      display: inline-block;
      width: 50%;
      float: left;
      padding: 0.06rem 0;
      font-size: 0.22rem;
    }
    .storeChoose .default{
      background-color: #ccc;
    }
    .loadingDiv{
      width: 100%;
      height: 4.2rem;
      position: absolute;
      top:0;left: 0;
      z-index: 9999;
      background-color: white;
      text-align: center;
      line-height: 4.2rem;
      font-size: 0.24rem;
    }
  </style>
</head>
<body>
  <script src="../js/echarts.common.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="../config.js" type="text/javascript" charset="utf-8"></script>
  <script src="../js/mui.min.js"></script>
  <script src="../common/timeChoose.js" type="text/javascript" charset="utf-8"></script>
  <div id="app" class="mui-content deviceDiv">
    <time-choose :datetype="dateType" :todate="toDate" :fromdate="fromDate"></time-choose>

    <div class="deviceTitle">
      <div class="imgDiv">
        <img src="../images/head-min.jpg" alt="">
      </div>
      <div class="deviceInfo">
        <p> <span style="font-size: 0.26rem"> <strong>{{originalData.series}}</strong> </span> <span style="display: inline-block;float: right;margin-right: 0.2rem">{{originalData.number}}台</span> </p>
        <p>
          总收币：{{originalData.coin !=='--' ? originalData.coin + '枚' : originalData.coin }}
          <span style="display: inline-block;float: right;margin-right: 0.2rem">{{originalData.money !== '--' ? originalData.money+'元' : originalData.money}}</span>
        </p>
        <p v-show="deviceType === 1">总返奖：{{originalData.awardNumber}}
          <span style="display: inline-block;float: right;margin-right: 0.2rem">{{originalData.awardMoney !=='--' ? originalData.awardMoney +'元' : originalData.awardMoney}}</span>
        </p>
        <p v-show="deviceType === 1">总返奖率： <span style="float: right;margin-right: 0.2rem">{{originalData.awardRate !=='--' ? originalData.awardRate+'%' :'--' }}</span></p>
        <p v-show="deviceType !== 1">总出票：{{originalData.ticketNumber}}    <span style="display: inline-block;float: right;margin-right: 0.2rem">{{originalData.ticketMoney}}元</span> </p>
        <p v-show="deviceType !== 1">总出票率：<span style="float: right;margin-right: 0.2rem">{{originalData.ticketRate}}张/币</span></p>
      </div>
    </div>

    <div class="storeChoose">
      <span @click="choose(1)" :class="{default:type ===1 }">{{(dateType === 0 ? '近30日' : dateType === 1 ? '近12周' : '近12个月')}}平均单台收币</span>
      <span @click="choose(2)" :class="{default:type ===2 }" v-show="deviceType === 1">{{(dateType === 0 ? '近30日' : dateType === 1 ? '近12周' : '近12个月')}}平均返奖率</span>
      <span @click="choose(2)" :class="{default:type ===2 }" v-show="deviceType !== 1">{{(dateType === 0 ? '近30日' : dateType === 1 ? '近12周' : '近12个月')}}平均出票率</span>
    </div>
    <!--折线图 start-->
    <div style="width: 100%;background-color: white;position: relative">
      <div v-show="isGetMapData !==3"  @click="getMapData" class="loadingDiv" style="">
          {{isGetMapData === 2 ? '加载中...' : isGetMapData === 1 ?  '点击加载' :'' }}
      </div>

      <div id="lineChart" style="width: 100%;height: 4.2rem"></div>
    </div>
    <!--折线图 end-->
    <!--设备列表 start-->
    <div class="deviceListDiv">
        <div class="device"  @click="toPage(index)"  v-for="(item,index) in deviceList" style="position: relative">
          <img v-show="deviceType ===1" style="width: 0.25rem; position:relative;top:0.15rem; left:-0.05rem;float: left;margin-left: 0.2rem" src="../images/liping.png" alt="">
          <img v-show="deviceType ===2" style="width: 0.3rem; position:relative;top:0.15rem; left:-0.05rem;float: left;margin-left: 0.2rem"  src="../images/game1.png" alt="">
          <img v-show="deviceType ===3" style="width: 0.3rem; position:relative;top:0.15rem; left:-0.05rem;float: left;margin-left: 0.2rem"  src="../images/caipiao.png" alt="">
          <p class="deviceName">{{item.deviceName}}</p>
          <img v-show="item.deviceState ===1&&dateType===0" src="../images/troubleflag-green.png" alt="" style="width: 0.25rem;position: absolute;top:0.3rem;right: 0.2rem;"/>
          <img v-show="(item.deviceState === 2||item.deviceState === 3||item.deviceState === 4)&&dateType===0" src="../images/troubleflag-red.png" alt="" style="width: 0.25rem;position: absolute;top:0.3rem;right: 0.2rem;"/>
          <img v-show="item.deviceState ===5&&dateType===0" src="../images/troubleflag-gray.png" alt="" style="width: 0.25rem;position: absolute;top:0.3rem;right: 0.2rem;"/>
          <img v-show="item.deviceState ===6&&dateType===0" src="../images/troubleflag-gray2.png" alt="" style="width: 0.25rem;position: absolute;top:0.3rem;right: 0.2rem;"/>
          <div class="info">
            <div class="leftDiv">
              <p>收币：{{item.deviceCoin !== '--' ? item.deviceCoin + '枚' : item.deviceCoin}} </p>
              <p v-show="deviceType === 1">返奖：{{item.awardNumber !=='--'? item.awardNumber +'个' : item.awardNumber}} </p>
              <p v-show="deviceType !== 1">出票：{{item.tikectNumber !=='--' ? item.tikectNumber +'张' : item.tikectNumber}}</p>
            </div>
            <div class="rightDiv">
              <div v-show="deviceType === 1" class="floatLeft" style="margin-left: 0.1rem">
                <p>返奖单价 </p>
                <p>{{item.awardMoney}}</p>
              </div>
              <div v-show="deviceType === 1" class="floatLeft" style="margin-left: 0.1rem">
                <p>返奖局 </p>
                <p>{{ item.award !== '--' ?  Math.round(item.award) : '--'  }}</p>
              </div>
              <div  class="floatRight">
                <p v-show="deviceType === 1">返奖率</p>
                <p v-show="deviceType !== 1">出票率</p>
                <p v-show="deviceType === 1">{{item.awardRate !== '--' ? item.awardRate +'%' : item.awardRate  }}</p>
                <p v-show="deviceType !== 1">{{item.tikectRate!=='--' ? item.tikectRate+'张/币' : item.tikectRate}}</p>
              </div>
            </div>
          </div>
        </div>
    </div>
    <!--设备列表 end-->
  </div>
  <script type="text/javascript">
    mui.init()
    var vm = new Vue({
      el: '#app',
      data: function() {
        return {
          lineOptions:{
              //标题，
              title: {
                subtext: '30天总收币趋势图',
                left: 'center',
                textStyle: {
                  fontSize: 20,
                  fontWeight: 500
                }
              },
              tooltip: {
                trigger: 'axis',    //item 饼图触发  axis线性图触发
                textStyle: {
                  fontSize: 12
                }
              },
              legend: {
                data: ['乌龟（大）','门店平均线',],
                show: true,
                bottom:10
              },
              feature: {
                dataView: {
                  show: true,
                  readOnly: false
                }
              },
              calculable: true,
              grid: {
                left: '2%',
                right: '5%',
                bottom: '14%',
                top: '20%',
                containLabel: true,
                borderColor: '#e2e2e2'
              },
              xAxis: [
                  {
                    type: 'category',
                    splitLine: {
                      show: false
                  },
                  data: [],
                  axisLabel: {
                    interval:2,
                    textStyle: {
                      color: '#868686',
                      fontSize: '8px'
                    }
                  }
                }
              ],
              yAxis: [
                {
//                  name:'销售额',
                  type: 'value',
                  nameLocation: 'end',
                  max: 100,
                  splitLine: {
                    show:true,
                    lineStyle: {
                      // 使用深浅的间隔色  
                      color: ['#b1b1b1'],
                      type:'dotted'
                    }
                  },
                  axisLabel: {
                    textStyle: {
                      color: '#868686',
                      fontSize: '8px'
                    }
                  }
                },
              ],

              series: [
                {
                  name: '乌龟（大）',
                  type: 'bar',
                  yAxisIndex: 0,
                  data:[],
                  itemStyle: {
                    normal: {
                      color: '#4472C4',        // 控制例子线条的style
                      lineStyle: {
                        color: '#4472C4'      //  lineStyle 控制对应线条style
                      }
                    }
                  },
                },
                {
                  name: '门店平均线',
                  type: 'line',
                  data:[],
                  yAxisIndex: 0,
                  itemStyle: {
                    normal: {
                      color: '#ccc ',        // 控制例子线条的style
                      lineStyle: {
                        color: '#ccc'      //  lineStyle 控制对应线条style
                      }
                    }
                  },
                },

              ]
            },
          currentShopObj:'',
          totalData:{},
          storeName:'',
          type:1,    //1 出币量  2出奖率
          dateType:0,   //0 日  1周  2月
          storeId:'',
          deviceType:1,
          fromDate:'',
          toDate:'',
          deviceModel:'',
          originalData:'',
          deviceList:[
            {
              "deviceName":"",
              "deviceCoin":0,
              "deviceNo":"0",
              "deviceId":0,
              "deviceState":0,
              "awardMoney":"0",
              "award":"0",
              "awardRate":"0",
              "awardNumber":0
            },

          ],
          isGetMapData:1,  //1 点击加载  2.加载中  3.加载完成
        }
      },
      created:function() {
        mui.plusReady(function(){
          vm.receiveParams()
        });
      },
      mounted: function() {
        this.initCharts()
      },
      methods: {
        receiveParams: function() {
          var sf = plus.webview.currentWebview();
          this.currentShopObj = sf.currentShopObj;
          this.storeId = sf.storeId;
          this.deviceType=sf.deviceType;
          this.deviceModel=sf.deviceModel;
          this.fromDate=sf.fromDate;
          this.toDate=sf.toDate;
          this.storeName=sf.storeName;
          this.dateType=sf.dateType
//          this.loadData();
        },
        loadData:function() {
          var vm = this;
          config.ajax({
            url:'/report/checkDeviceModel',
            data:{
              fromDate:new Date(vm.fromDate).format('yyyyMMdd'),
              toDate:new Date(vm.toDate).format('yyyyMMdd'),
              storeId:vm.storeId,
              deviceType:vm.deviceType,
              deviceNo:vm.deviceModel,
              type:vm.dateType,
              checkType:1,  //1  投币
            },
            success: function(res){
              console.log(JSON.stringify(res))
              if(res.result ===1){
                vm.originalData=res.data;
                vm.deviceList=res.data.device;
//                vm.getMapData()
              }else {
                mui.toast(res.errormsg)
              }
            },
            error:function(res){
              mui.toast(res.errormsg)
            }
          })
        },
        //单台平均收币图表信息
        getMapData:function() {
          this.isGetMapData=2
          var vm = this;
          config.ajax({
            url:'/report/checkDeviceModelTrendMap',
            data:{
              fromDate:new Date(vm.fromDate).format('yyyyMMdd'),
              toDate:new Date(vm.toDate).format('yyyyMMdd'),
              storeId:vm.storeId,
              deviceType:vm.deviceType,
              deviceNo:vm.deviceModel,
              type:vm.dateType,
              checkType:1,  //1  投币
            },
            success: function(res){
              console.log(JSON.stringify(res))
              if(res.result ===1){
                vm.getMapData2()
                vm.originalData.trendMap=res.data.trendMap
              }else {
                mui.toast(res.errormsg)
              }
            },
            error:function(res){
              mui.toast(res.errormsg ? res.errormsg : '加载失败')
            }
          })
        },
        //单台平均 出票率/出奖率 图表信息
        getMapData2:function(){
          config.ajax({
            url:'/report/checkDeviceModelgetCoinsMap',
            data:{
              fromDate:new Date(vm.fromDate).format('yyyyMMdd'),
              toDate:new Date(vm.toDate).format('yyyyMMdd'),
              storeId:vm.storeId,
              deviceType:vm.deviceType,
              deviceNo:vm.deviceModel,
              type:vm.dateType,
              checkType:1,  //1  投币
            },
            success: function(res){
              if(res.result ===1){
                vm.originalData.getCoinsMap=res.data.getCoinsMap
                vm.isGetMapData=3
                vm.changeChart();
              }else {
                mui.toast(res.errormsg)
              }
            },
            error:function(res){
              mui.toast(res.errormsg ? res.errormsg : '加载失败')
            }
          })
        },

        initCharts: function() {
          var vm = this;
          var lineChart = echarts.init(document.getElementById('lineChart'));
          lineChart.setOption(vm.lineOptions)
        },
        toPage:function(index){
          var  vm=this;
          mui.openWindow({
            url: 'coinDevice.html',
            id: 'coinDevice',
            styles: {
              titleNView: {
                titleText:vm.storeName,
                titleColor: "#FFFFFF",
                titleSize: "17px",
                backgroundColor: "#FF6800",
                autoBackButton: true,
                buttons: [{
                  fontWeight: 'normal',
                  fontSize: '18px',
                  float: 'right',
                  fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                  text: "\ue602",
                  onclick: function() {
                    var allPage = plus.webview.all()
                    var nowPage = plus.webview.getWebviewById('index')
                    for(var i = 0; i < allPage.length; i++) {
                      if(allPage[i].getURL() !== nowPage.getURL()) {
                        plus.webview.close(allPage[i]);
                      }
                    }
                  }
                }],
                splitLine: {
                  color: "#CCCCCC",
                  height: "1px"
                }
              }
            },
            extras: {
              storeName:vm.storeName,
              fromDate: vm.fromDate,
              toDate: vm.toDate,
              storeId: vm.storeId,
              deviceType: vm.deviceType,
              deviceNo: vm.deviceList[index].deviceNo,
              deviceId: vm.deviceList[index].deviceId,
              dateType:vm.dateType ,   //0 日 1 周 2 月
              deviceName:vm.deviceList[index].deviceName,
              awardMoney:vm.deviceList[index].awardMoney,
              type:vm.deviceType ===1 ? 4 : vm.deviceType ===2 ? 2 : 1,
              checkType:1
            }
          });

        },
        choose:function(type){
          if(this.isGetMapData === 3){
            this.type=type;
            this.changeChart()
          }else if(this.isGetMapData === 1){
            this.getMapData()
          }

        },
//收币和出奖切换 数据变换fun
        changeChart:function(){
          var mapData='',vm=this;
          if(vm.type ===1){
            mapData= JSON.parse(JSON.stringify(vm.originalData.getCoinsMap))
          }else if(vm.type ===2){
            mapData= JSON.parse(JSON.stringify(vm.originalData.trendMap))
          }
          vm.lineOptions.series[0].data=[],vm.lineOptions.series[1].data=[],vm.lineOptions.xAxis[0].data=[];
          var max=0, storeMax=0,deviceMax=0;
          var timeValue=''
          mapData.forEach(function(item,index){
            if(vm.dateType ===0){
              timeValue='近30天平均'
              item.day=(item.day+'').replace(/^(\d{4})(\d{2})(\d{2})$/, "$3")+'日';
            }if(vm.dateType ===1){
              timeValue='近12周平均'
              item.day=item.day+'周'
            }if(vm.dateType ===2){
              timeValue='近12个月平均'
              item.day=(item.day+'').replace(/^(\d{4})(\d{2})$/, "$2")+'月';
            };
            vm.lineOptions.series[0].data.push(item.device);
            vm.lineOptions.series[1].data.push(item.store);
            vm.lineOptions.xAxis[0].data.push(item.day);
            if( Number(item.device)  > deviceMax){
              deviceMax=Number(item.device)
            }
            if(Number(item.store) > storeMax){
              storeMax=Number(item.store)
            }
          });
          if(storeMax > deviceMax){
            max =storeMax
          }else{
            max =deviceMax
          }

          if(vm.deviceType ===1){
            vm.lineOptions.title.subtext=timeValue+(vm.type ===1? '单台收币' : '返奖率' );
            vm.lineOptions.yAxis[0].axisLabel.formatter= vm.type === 2 ? '{value}%' : '{value}';
          }else {
            vm.lineOptions.title.subtext=timeValue+(vm.type ===1? '单台收币' : '出票率' );
          };
          vm.lineOptions.legend.data[0]=vm.originalData.series;
          vm.lineOptions.series[0].name=vm.originalData.series;
          max= parseInt(max/10)*10;
          if(vm.type ===1){
            vm.lineOptions.series[0].itemStyle.normal.color='#4472C4'
            vm.lineOptions.series[0].itemStyle.normal.lineStyle.color='#4472C4'
            vm.lineOptions.series[0].type='bar' ;
            vm.lineOptions.yAxis[0].max=max > 10 ? (max+100) : 100;
          }else{
            vm.lineOptions.series[0].type='line' ;
            vm.lineOptions.series[0].itemStyle.normal.color='#a3d609'
            vm.lineOptions.series[0].itemStyle.normal.lineStyle.color='#a3d609'
            vm.lineOptions.yAxis[0].max=max > 10 ? (max+10) : 100;
          }


          vm.initCharts()
        },
      },
      watch: {
        fromDate: function() {
          this.loadData()
          var vm=this;
          var sf = plus.webview.currentWebview();
          sf.setStyle({
            titleNView: {
              titleText: vm.dateType ===0 ?  vm.toDate : vm.fromDate+'至'+vm.toDate,
              titleSize: "0.22rem",
            }
          });
        }
      }
    })
  </script>


</body>
</html>